<template>
    <div class="box">
<div class="image" v-for="item in image" :key="item.id"><img v-lazy="item.url" alt="" :key="item.url"></div>
    </div>
</template>
<script>
    import {list} from '@/utils/index'
    import {users,photos} from '@/api/http'

    export default {
        data() {
            return {
                image:[],
            }
        },
        created(){
            // this.get()         
            // console.log('list',list)
            // this.test()
            // this.getUser()
            this.getphotos()
        },
        methods:{
            // async await
        async    get(){
                const res = await list
                console.log(res)
            },
        //   promise
            test(){
  new Promise((resolve, reject)=>{
    console.log('promise')
    setTimeout(()=>{
      console.log('time out')
      console.log('reject',reject)
      reject(3455435)
    }, 1000)
  }).then(r=>{
    console.log('promise then')
    console.log(r)
  }).catch(e=>{
    console.log('promise catch')
    console.log(e)
  })
  console.log('new Promise done')
}, 
 async getUser(){
    const res = await users()
    console.log('user',res)
},
async getphotos(){
    const {data:res}= await photos()
    console.log('photos',res)
    this.image  = res
},

  

           
        },
    }
</script>
<style scoped>
    .box{
        display: flex;
        flex-flow: wrap;
        width: 100%;
        align-items: center;
        justify-content: flex-start;

        
    }
.image{
   
    width: 33.33%;
    height: 300px;
    
}
.image >img{
    width: 100%;
    height: 100%;
}
</style>